<template>
  <el-dialog
    :title="title"
    :visible.sync="isShow"
    @close="close"
    width="1024px"
  >
    <div class="dialog-contant">
      <div class="base-info-desc">
        <!-- <div class="base-title">基本信息</div> -->
        <el-descriptions
          style="margin-bottom: 15px; width: 950px"
          title="基本信息"
          :column="4"
          border
          labelClassName="desc-label"
          contentClassName="desc-content"
        >
          <el-descriptions-item>
            <template slot="label"> 企业名 </template>
            {{ baseInfoObject.entName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系人 </template>
            {{ baseInfoObject.contact }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系电话 </template>
            {{ baseInfoObject.phoneNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 所在地址 </template>
            <span>
              {{ fomatterAdressName(baseInfoObject.province) }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 详细地址 </template>
            <span> {{ baseInfoObject.entAddress }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 描述 </template>
            {{ baseInfoObject.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 营业执照 </template>
            <image-preview
              :src="baseInfoObject.businessLicense"
              :width="50"
              :height="50"
            />
          </el-descriptions-item>
        </el-descriptions>
        <el-tabs v-model="activeTabName" @tab-click="tabClick">
          <el-tab-pane label="维保记录" name="0">
            <div class="card-contant">
              <div style="padding-bottom: 15px">
                <el-table
                  :data="wbPlanList"
                  size="mini"
                  max-height="450"
                  :row-class-name="planRowClassName"
                  @current-change="clickPlanCol"
                  v-if="false"
                >
                  <el-table-column
                    label="维保名称"
                    align="center"
                    prop="planName"
                    width="80"
                  ></el-table-column>
                  <el-table-column
                    label="状态"
                    align="center"
                    prop="execStatus"
                    width="100"
                  >
                    <template slot-scope="scope">
                      {{ fomatterLabelName("wbStatus", scope.row.execStatus) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="类型"
                    align="center"
                    prop="planType"
                    width="90"
                  >
                    <template slot-scope="{ row }">
                      {{ fomatterLabelName("wbPlanType", row.planType) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="创建时间"
                    align="center"
                    prop="job"
                    width="100"
                  >
                    <template slot-scope="{ row }">
                      {{ timestampToDate(row.createTime, "ymd") }}
                    </template>
                  </el-table-column>
                  <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="60">
                                        <template slot-scope="scope">
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-delete"
                                                @click="contractDelete(scope.row)"
                                                v-hasPermi="['wb:wbContract:remove']"
                                            >删除</el-button>
                                        </template>
                                    </el-table-column> -->
                </el-table>
                <el-table
                  :data="wbPlanList"
                  size="mini"
                  max-height="450"
                  :row-class-name="planRowClassName"
                  @current-change="clickPlanCol"
                  style="width: 100%"
                >
                  <el-table-column
                    label="序号"
                    align="center"
                    prop="id"
                    width="55"
                  />
                  <el-table-column
                    label="客户名"
                    align="center"
                    prop="clientName"
                  />
                  <el-table-column
                    label="客户地址"
                    align="center"
                    prop="clientAddress"
                  />
                  <el-table-column
                    label="计划类型"
                    align="center"
                    prop="planType"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        fomatterLabelName("wbPlanType", scope.row.planType)
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="计划名称"
                    align="center"
                    prop="planName"
                  />
                  <el-table-column
                    label="计划开始时间"
                    align="center"
                    prop="planStartDate"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        parseTime(scope.row.planStartDate, "{y}-{m}-{d}")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="计划结束时间"
                    align="center"
                    prop="planEndDate"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        parseTime(scope.row.planEndDate, "{y}-{m}-{d}")
                      }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="是否下载"
                    align="center"
                    prop="ifDownload"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        scope.row.ifDownload == 1 ? "已下载" : "未下载"
                      }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="维保单位"
                    align="center"
                    prop="wbCompanyName"
                  />
                  <el-table-column
                    label="项目负责人"
                    align="center"
                    prop="fireFightingName"
                  />
                  <el-table-column
                    label="技术负责人"
                    align="center"
                    prop="engineerName"
                  />
                  <!-- <el-table-column label="负责人" align="center" prop="projectPrincipalId" /> -->
                  <el-table-column
                    label="操作者"
                    align="center"
                    prop="operaterName"
                  />
                  <el-table-column
                    label="执行状态"
                    align="center"
                    prop="execStatus"
                  >
                    <template slot-scope="scope">
                      {{ fomatterLabelName("wbStatus", scope.row.execStatus) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="完成时间"
                    align="center"
                    prop="finishTime"
                    width="120"
                  >
                    <template slot-scope="scope">
                      <span>{{
                        parseTime(scope.row.finishTime, "{y}-{m}-{d}")
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="描述" align="center" prop="remark" />

                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <el-button
                        v-if="
                          scope.row.execStatus == 6 || scope.row.execStatus == 5
                        "
                        size="mini"
                        type="text"
                        @click="download(scope.row)"
                        >下载</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                <pagination
                  v-show="planPageInfo.total > 0"
                  :total="planPageInfo.total"
                  :page.sync="planPageInfo.pageNum"
                  :limit.sync="planPageInfo.pageSize"
                  @pagination="getWbRecords"
                  small
                  layout="total, prev, pager, next"
                />
              </div>
              <!-- <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-edit"
                                @click="addCompany"
                                v-hasPermi="['wb:wbContract:add']"
                            >新增</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                icon="el-icon-edit"
                                @click="contractUpdate"
                                v-hasPermi="['wb:wbContract:edit']"
                                plain
                            >修改</el-button> -->
            </div>
          </el-tab-pane>
          <el-tab-pane label="人员架构" name="1">
            <div style="margin: 10px 0">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="addCompany"
                v-hasPermi="['wb:wbEntAuth:add1']"
                >新增</el-button
              >
            </div>
            <el-table
              :data="wbContractList"
              max-height="450"
              style="width: 100%"
              :row-class-name="contractRowClassName"
              @current-change="clickContractCol"
            >
              <!-- <el-table-column label="公司名称" align="center">
                                    <template slot-scope="scope">
                                        {{ scope.row.entAuthId|filtercComponent }}
                                    </template>
                                </el-table-column> -->
              <el-table-column
                label="姓名"
                align="center"
                prop="userName"
              ></el-table-column>
              <el-table-column label="手机号" align="center" prop="phone" />
              <!-- <el-table-column label="年龄" align="center" prop="age" width="50"/> -->
              <el-table-column
                label="职位"
                align="center"
                prop="job"
              ></el-table-column>
              <!-- <el-table-column label="创建时间" align="center" prop="createTime">
                                <template slot-scope="{row}">
                                    {{ timestampToDate(row.createTime, 'ymd') }}
                                </template>
                            </el-table-column> -->
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
                width="100"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="contractUpdate(scope.row)"
                    v-hasPermi="['wb:wbContract:edit']"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="contractDelete(scope.row)"
                    v-hasPermi="['wb:wbContract:remove']"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="contractPageInfo.total > 0"
              :total="contractPageInfo.total"
              :page.sync="contractPageInfo.pageNum"
              :limit.sync="contractPageInfo.pageSize"
              @pagination="componentUserList"
              small
              layout="total, prev, pager, next"
            />
            <!-- <div class="card-contant">
                            <div>
                            </div>
                            <div style="margin-left: 15px;">
                                <div class="base-title" v-if="contractItem.id">架构详情</div>
                                <el-descriptions v-if="contractItem.id" style="margin-bottom: 15px;width: 500px;"
                                    title="" :column="2" border labelClassName="desc-label-two"
                                    contentClassName="desc-content-two">
                                    <el-descriptions-item>
                                        <template slot="label">
                                            姓名
                                        </template>
                                        {{ contractItem.userName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item span="2">
                                        <template slot="label">
                                            手机号
                                        </template>
                                        {{ contractItem.phone }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            部门
                                        </template>
                                        <span> {{ contractItem.deptName }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            职位
                                        </template>
                                        <span> {{ contractItem.job }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            年龄
                                        </template>
                                        {{ contractItem.age }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            创建时间
                                        </template>
                                        <span> {{ timestampToDate(contractItem.createTime, 'ymd') }}</span>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div> -->
          </el-tab-pane>
          <el-tab-pane label="用电安全" name="2">
            <div class="card-contant">
              <!-- <el-popover
                                placement="right"
                                width="510"
                                trigger="click">
                                <div>

                                </div>
                                <el-button slot="reference" icon="el-icon-s-unfold" size="mini">查看</el-button>
                            </el-popover> -->
              <div style="margin: 10px 0">
                <!-- <div class="base-title" v-if="elecSafetyItem.id">用电安全详情</div>
                                <el-descriptions v-if="elecSafetyItem.id" style="margin-bottom: 15px;width: 500px;"
                                    title="" :column="2" border labelClassName="desc-label-two"
                                    contentClassName="desc-content-two">
                                    <el-descriptions-item>
                                        <template slot="label">
                                            公司名称
                                        </template>
                                        {{ elecSafetyItem.enterpriseId | filtercComponent }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            设备名称
                                        </template>
                                        {{ elecSafetyItem.deviceName }}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            发布时间
                                        </template>
                                        <span> {{ timestampToDate(elecSafetyItem.createTime, 'ymd') }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item span="2">
                                        <template slot="label">
                                            内容
                                        </template>
                                        <div v-html="elecSafetyItem.otherContent"></div>
                                    </el-descriptions-item>
                                    <el-descriptions-item span="2">
                                        <template slot="label">
                                            图片
                                        </template>
                                        <div v-if="elecSafetyItem.picture && elecSafetyItem.picture != ''">
                                            <img style="height: 80px;width: 80px;border-radius: 10px;margin-right: 10px;"
                                                v-for="item, index in pictureList" :key="index" :src="baseUrl + item"
                                                alt="">
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item span="2">
                                        <template slot="label">
                                            描述
                                        </template>
                                        {{ elecSafetyItem.remark }}
                                    </el-descriptions-item>
                                </el-descriptions> -->
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="elecSafetyAdd"
                  v-hasPermi="['wb:wbElecSafety:add']"
                  >新增</el-button
                >
              </div>
              <div style="padding-bottom: 15px">
                <el-table
                  :data="wbElecSafetyList"
                  size="mini"
                  max-height="450"
                  :row-class-name="elecSafetyClassName"
                  @current-change="clickElecSafetyCol"
                >
                  <!-- <el-table-column label="公司名称" align="center" prop="enterpriseId">
                                        <template slot-scope="{row}">
                                            {{ row.enterpriseId | filtercComponent }}
                                        </template>
                                    </el-table-column> -->
                  <el-table-column
                    label="设备名称"
                    align="center"
                    prop="deviceName"
                    width="200"
                  />
                  <el-table-column
                    label="内容"
                    align="center"
                    prop="otherContent"
                    show-overflow-tooltip
                  />
                  <el-table-column label="图片" align="center" prop="picture">
                    <template slot-scope="scope">
                      <image-preview
                        v-if="scope.row.picture"
                        :src="scope.row.picture"
                        :width="50"
                        :height="50"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发布时间"
                    align="center"
                    prop="createTime"
                    width="100"
                  >
                    <template slot-scope="scope">
                      {{ timestampToDate(scope.row.createTime, "ymd") }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    width="150"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="elecSafetyUpdate(scope.row)"
                        v-hasPermi="['wb:wbElecSafety:edit']"
                        >修改</el-button
                      >
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="elecSafetyDelete(scope.row)"
                        v-hasPermi="['wb:wbContract:remove']"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>

                <pagination
                  v-show="elecSafetyPageInfo.total > 0"
                  :total="elecSafetyPageInfo.total"
                  :page.sync="elecSafetyPageInfo.pageNum"
                  :limit.sync="elecSafetyPageInfo.pageSize"
                  @pagination="elecSafetyList"
                  small
                  layout="total, prev, pager, next"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="疏散通道" name="3">
            <div class="card-contant">
              <!-- <el-popover
                                placement="right"
                                width="510"
                                trigger="click">
                                <el-button slot="reference" icon="el-icon-s-unfold" size="mini">查看</el-button>
                            </el-popover> -->
              <div style="margin: 10px 0">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="exitAdd"
                  v-hasPermi="['wb:wbExit:add']"
                  >新增</el-button
                >
              </div>
              <div style="padding-bottom: 15px">
                <el-table
                  :data="wbExitList"
                  size="mini"
                  max-height="450"
                  :row-class-name="exitClassName"
                  @current-change="clickExitCol"
                >
                  <el-table-column label="标题" align="center" prop="address" />
                  <el-table-column
                    label="内容"
                    align="center"
                    prop="situation"
                  />
                  <el-table-column label="图片" align="center" prop="picture">
                    <template slot-scope="scope">
                      <image-preview
                        v-if="scope.row.picture"
                        :src="scope.row.picture"
                        :width="50"
                        :height="50"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="发布时间"
                    align="center"
                    prop="createTime"
                  >
                    <template slot-scope="scope">
                      {{ timestampToDate(scope.row.createTime, "ymd") }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    width="160px"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="exitUpdate(scope.row)"
                        v-hasPermi="['wb:wbExit:edit']"
                        >修改</el-button
                      >
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['wb:wbExit:remove']"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="exitPageInfo.total > 0"
                  :total="exitPageInfo.total"
                  :page.sync="exitPageInfo.pageNum"
                  :limit.sync="exitPageInfo.pageSize"
                  @pagination="exitList"
                  small
                  layout="total, prev, pager, next"
                />
              </div>
              <div style="padding-bottom: 15px" v-if="false">
                <el-table
                  :data="wbExitList"
                  size="mini"
                  max-height="450"
                  :row-class-name="exitClassName"
                  @current-change="clickExitCol"
                >
                  <!-- <el-table-column label="公司名称" align="center" prop="bid">
                                        <template slot-scope="{row}">
                                        {{ row.bid | filtercComponent }}
                                        </template>
                                    </el-table-column> -->
                  <el-table-column
                    label="疏散通道类型"
                    align="center"
                    prop="exitType"
                  />
                  <el-table-column
                    label="宽度(m)"
                    align="center"
                    prop="width"
                  />
                  <el-table-column
                    label="高度(m)"
                    align="center"
                    prop="height"
                  />
                  <el-table-column
                    label="位置描述"
                    align="center"
                    prop="address"
                  />
                  <!-- <el-table-column label="畅通情况" align="center" prop="situation"/> -->
                  <!-- <el-table-column label="描述" align="center" prop="remark" show-overflow-tooltip/> -->
                  <el-table-column
                    label="发布时间"
                    align="center"
                    prop="createTime"
                  >
                    <template slot-scope="scope">
                      {{ timestampToDate(scope.row.createTime, "ymd") }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    align="center"
                    class-name="small-padding fixed-width"
                    width="160px"
                  >
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="exitUpdate(scope.row)"
                        v-hasPermi="['wb:wbExit:edit']"
                        >修改</el-button
                      >
                      <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                        v-hasPermi="['wb:wbExit:remove']"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="exitPageInfo.total > 0"
                  :total="exitPageInfo.total"
                  :page.sync="exitPageInfo.pageNum"
                  :limit.sync="exitPageInfo.pageSize"
                  @pagination="exitList"
                  small
                  layout="total, prev, pager, next"
                />
              </div>
              <!-- <div style="margin-left: 15px;">
                                <div class="base-title" v-if="exitItem.id">疏散通道详情</div>
                                <el-descriptions v-if="exitItem.id" style="margin-bottom: 15px;width: 480px;" title=""
                                    :column="2" border labelClassName="desc-label-two"
                                    contentClassName="desc-content-two">
                                    <el-descriptions-item>
                                        <template slot="label">
                                            宽度(m)
                                        </template>
                                        <span>{{ exitItem.width }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            高度(m)
                                        </template>
                                        <span>{{ exitItem.height }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            位置描述
                                        </template>
                                        <span> {{ exitItem.address }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            畅通情况
                                        </template>
                                        <span>{{ exitItem.situation }}</span>
                                    </el-descriptions-item>
                                    <el-descriptions-item span="2">
                                        <template slot="label">
                                            图片
                                        </template>
                                        <div v-if="exitItem.picture && exitItem.picture != ''">
                                            <img style="height: 80px;width: 80px;border-radius: 10px;margin-right: 10px;"
                                                v-for="item, index in exitPictureList" :key="index"
                                                :src="baseUrl + item" alt="">
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item span="2">
                                        <template slot="label">
                                            描述
                                        </template>
                                        <span>{{ exitItem.remark }}</span>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div> -->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 添加或修改维保合同对话框 -->
    <el-dialog
      :title="contractTitle"
      :visible.sync="isContractDialog"
      width="800px"
      append-to-body
    >
      <el-form
        ref="contractEdit"
        :model="contractEdit"
        :rules="contractRules"
        label-width="110px"
        :inline="true"
        class="dialog-form"
      >
        <el-form-item label="姓名" prop="userName">
          <el-input
            v-model="contractEdit.userName"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="contractEdit.phone"
            placeholder="请输入手机号"
            clearable
          />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input
            v-model="contractEdit.age"
            placeholder="请输入年龄"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="客户公司" prop="entAuthId">
                    <el-select v-model="contractEdit.entAuthId" filterable placeholder="客户公司名称" style="width: 200px;" clearable>
                    <el-option v-for="item,index in componentList" :key="index" :label="item.entName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="部门" prop="deptName">
          <el-input
            v-model="contractEdit.deptName"
            placeholder="请输入部门"
            clearable
          />
        </el-form-item>
        <el-form-item label="职位" prop="job">
          <el-input
            v-model="contractEdit.job"
            placeholder="请输入职务"
            clearable
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitContractForm">确 定</el-button>
        <el-button @click="isContractDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改用电安全对话框 -->
    <el-dialog
      title="修改用电安全"
      :visible.sync="isElecSafetyDialog"
      width="600px"
      append-to-body
    >
      <el-form
        ref="elecSafetyEdit"
        :model="elecSafetyEdit"
        :rules="elecSafetyRules"
        label-width="80px"
      >
        <el-form-item label="设备名称" prop="deviceName">
          <el-input
            v-model="elecSafetyEdit.deviceName"
            placeholder="请输入设备名称"
          />
        </el-form-item>
        <!-- <el-form-item label="企业名称" prop="deviceName">
                    <el-select v-model="elecSafetyEdit.enterpriseId" filterable clearable>
                        <el-option v-for="item,index in componentList" :key="index" :label="item.entName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="其他">
          <editor v-model="elecSafetyEdit.otherContent" :min-height="192" />
        </el-form-item>
        <el-form-item label="设备图片" prop="picture">
          <image-upload v-model="elecSafetyEdit.picture" />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input v-model="elecSafetyEdit.remark" placeholder="请输入描述" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitElecSafetyForm"
          >确 定</el-button
        >
        <el-button @click="isElecSafetyDialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改疏散通道对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="isExitDialog"
      width="500px"
      append-to-body
    >
      <el-form
        ref="exitEdit"
        :model="exitEdit"
        :rules="exitRules"
        label-width="80px"
      >
        <!-- <el-form-item label="企业名称" prop="bid">
                    <el-select v-model="exitEdit.bid" filterable clearable>
                        <el-option v-for="item,index in componentList" :key="index" :label="item.entName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="标题" prop="address">
          <el-input
            v-model="exitEdit.address"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- <el-form-item label="宽度(m)" prop="width">
                    <el-input v-model="exitEdit.width" placeholder="请输入宽度(m)" />
                </el-form-item>
                <el-form-item label="高度(m)" prop="height">
                    <el-input v-model="exitEdit.height" placeholder="请输入高度(m)" />
                </el-form-item> -->
        <el-form-item label="内容" prop="situation">
          <el-input
            v-model="exitEdit.situation"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-form-item label="图片" prop="picture">
          <image-upload v-model="exitEdit.picture" />
        </el-form-item>
        <el-form-item label="描述" prop="remark">
          <el-input
            v-model="exitEdit.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitExitForm">确 定</el-button>
        <el-button @click="isExitDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import Dictionary from "@/utils/dictionary/index.js";
import { getWbEntAuth } from "@/api/wb/wbEntAuth";
import {
  listWbElecSafety,
  getWbElecSafety,
  delWbElecSafety,
  addWbElecSafety,
  updateWbElecSafety,
  getExportPdf,
} from "@/api/wb/wbElecSafety";
import {
  listWbExit,
  getWbExit,
  delWbExit,
  addWbExit,
  updateWbExit,
} from "@/api/wb/wbExit";
import {
  getCompanyUserList,
  queryCompanyUser,
  addCompanyUser,
  editCompanyUser,
  deleteCompanyUser,
} from "@/api/wb/userManage";
import { listWbPlan, getWbPlan } from "@/api/wb/wbPlan";
import { fomatterLabelName, timestampToDate } from "@/utils/index";
import { fomatterAdressName } from "@/utils/index.js";
import ProviceSelect from "@/components/ProviceSelect/index.vue";
import { mapGetters, mapActions } from "vuex";
export default {
  components: { ProviceSelect },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      Dictionary,
      title: "详情",
      pickerOptions: {
        disabledDate(time) {
          let now = timestampToDate("", "ymd");
          let times = timestampToDate(new Date(time).getTime(), "ymd");
          return new Date(times).getTime() < new Date(now).getTime();
        },
      },
      isShow: false,
      activeTabName: "0",
      baseInfoObject: {},
      contractTitle: "新增业主人员",
      // 维保记录
      wbPlanList: [],
      planPageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      planItem: {},
      activePlanId: "",

      wbContractList: [],
      isContractDialog: false,
      contractPageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      contractItem: {},
      contractEdit: {},
      activeContractId: "",

      wbElecSafetyList: [],
      elecSafetyPageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      activeElecSafetyId: "",
      elecSafetyEdit: {},
      elecSafetyItem: {},
      isElecSafetyDialog: false,

      wbExitList: [],
      exitPageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      activeExitId: "",
      exitEdit: {},
      exitItem: {},
      isExitDialog: false,

      // 表单校验
      contractRules: {
        userName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        entAuthId: [
          { required: true, message: "公司不能为空", trigger: "blur" },
        ],
      },
      // 表单校验
      elecSafetyRules: {
        deviceName: [
          { required: true, message: "请输入设备名称", trigger: "blur" },
        ],
        enterpriseId: [
          { required: true, message: "请输入企业名", trigger: "blur" },
        ],
      },
      exitRules: {
        bid: [{ required: true, message: "请选择公司", trigger: "blur" }],
      },
    };
  },
  filters: {
    forrmatterTime(time) {
      if (!time || time == "") return "";
      return timestampToDate(time, "ymdhm");
    },
  },
  props: {
    showDialog: {
      default: false,
      type: Boolean,
    },
    baseInfo: {
      default() {
        return {};
      },
      type: Object,
    },
    // 1 业主公司
    pageType: {
      default: "1",
      type: String,
    },
  },
  watch: {
    showDialog(n) {
      this.isShow = n;
      if (n) {
        this.baseInfoObject = {};
        if (this.pageType == "1") {
          this.getAuthInfo();
        }
      }
    },
  },
  computed: {
    ...mapGetters(["allCityList"]),
    ...mapGetters(["componentList"]),
    pictureList() {
      let picture = this.elecSafetyItem.picture;
      if (picture && picture != "") {
        return picture.split(",");
      }
      return "";
    },
    exitPictureList() {
      let picture = this.exitItem.picture;
      if (picture && picture != "") {
        return picture.split(",");
      }
      return "";
    },
  },
  created() {
    // 查询所有业主公司
    this.getCompanyList();
    this.isShow = this.showDialog;
  },
  methods: {
    ...mapActions("reqSelect", ["getCompanyList"]),
    fomatterLabelName,
    fomatterAdressName,
    timestampToDate,
    close() {
      console.log("关闭");
      this.activePlanId = "";
      this.activeContractId = "";
      this.activeElecSafetyId = "";
      this.activeExitId = "";
      this.$emit("close", false);
    },
    download(row) {
      this.$confirm("此操作将下载文件，需要等待时间, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let url = row.examiningReport.slice(0, -3) + "pdf";

          var oReq = new XMLHttpRequest();
          var URLToPDF = row.examiningReport.slice(0, -4) + "split.xlsx";

          oReq.open("GET", URLToPDF, true);
          oReq.responseType = "blob";
          oReq.onload = function () {
            var file = new Blob([oReq.response], {
              type: "application/xlsx",
            });
            saveAs(file, "维保计划split.xlsx");
          };

          oReq.send();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });

      return;
    },
    // 根据业主id查 业主详情 人员架构 用电安全 疏散通道
    getAuthInfo() {
      console.log(this.baseInfo);
      getWbEntAuth(this.baseInfo.id).then((response) => {
        this.baseInfoObject = response.data;
        this.getWbRecords();
        this.componentUserList();
        this.elecSafetyList();
        this.exitList();
      });
    },
    // 维保记录
    getWbRecords() {
      let { pageNum, pageSize } = this.planPageInfo;
      listWbPlan({ clientId: this.baseInfo.id, pageNum, pageSize }).then(
        (response) => {
          this.wbPlanList = response.rows;
          this.$set(this.planPageInfo, "total", response.total);
          if (this.activePlanId == "") {
            if (this.wbPlanList && this.wbPlanList.length > 0) {
              this.activePlanId = this.wbPlanList[0].id;
            }
          }
          if (this.wbPlanList && this.wbPlanList.length > 0) {
            this.querytWbPlanDetail();
          }
        }
      );
    },
    //维保记录详情
    querytWbPlanDetail() {
      getWbPlan(this.activePlanId).then((res) => {
        console.log(res.data);
        this.planItem = res.data;
      });
    },
    planRowClassName({ row, rowIndex }) {
      if (row.id == this.activePlanId) {
        return "success-row";
      }
      return "";
    },
    clickPlanCol(row) {
      this.activePlanId = row.id;
      this.querytWbPlanDetail();
    },
    // 人员架构
    componentUserList() {
      let { pageNum, pageSize } = this.contractPageInfo;
      getCompanyUserList({
        entAuthId: this.baseInfo.id,
        pageNum,
        pageSize,
      }).then((response) => {
        this.wbContractList = response.rows;
        this.$set(this.contractPageInfo, "total", response.total);
        if (this.activeContractId == "") {
          if (this.wbContractList && this.wbContractList.length > 0) {
            this.activeContractId = this.wbContractList[0].id;
          }
        }
        if (this.wbContractList && this.wbContractList.length > 0) {
          this.queryContractDetail();
        }
      });
    },
    clickContractCol(row) {
      this.activeContractId = row.id;
      this.queryContractDetail();
    },
    contractRowClassName({ row, rowIndex }) {
      if (row.id == this.activeContractId) {
        return "success-row";
      }
      return "";
    },
    addCompany() {
      this.resetContractEdit();
      this.isContractDialog = true;
    },
    /** 修改按钮操作 */
    queryContractDetail(row) {
      // this.resetContractEdit();
      queryCompanyUser(this.activeContractId).then((response) => {
        this.contractItem = response.data;
      });
    },
    resetContractEdit() {
      this.contractEdit = {
        id: "",
        userName: "",
        phone: "",
        age: "",
        entAuthId: this.baseInfo.id,
        deptName: "",
        job: "",
      };
    },
    // 用电安全
    elecSafetyList() {
      let { pageNum, pageSize } = this.elecSafetyPageInfo;
      listWbElecSafety({
        enterpriseId: this.baseInfo.id,
        pageNum,
        pageSize,
      }).then((response) => {
        this.wbElecSafetyList = response.rows;
        this.$set(this.elecSafetyPageInfo, "total", response.total);
        if (this.activeElecSafetyId == "") {
          if (this.wbElecSafetyList && this.wbElecSafetyList.length > 0) {
            this.activeElecSafetyId = this.wbElecSafetyList[0].id;
          }
        }
        if (this.wbElecSafetyList && this.wbElecSafetyList.length > 0) {
          this.queryElecSafetyDetail();
        }
      });
    },
    queryElecSafetyDetail() {
      // this.resetElecSafetyEdit();
      getWbElecSafety(this.activeElecSafetyId).then((res) => {
        this.elecSafetyItem = res.data;
      });
    },
    resetElecSafetyEdit() {
      this.elecSafetyEdit = {
        id: null,
        enterpriseId: this.baseInfo.id,
        deviceName: null,
        otherContent: null,
        picture: null,
        remark: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
      };
    },
    // 疏散通道
    exitList() {
      let { pageNum, pageSize } = this.exitPageInfo;
      listWbExit({ bid: this.baseInfo.id, pageNum, pageSize }).then(
        (response) => {
          this.wbExitList = response.rows;
          this.$set(this.exitPageInfo, "total", response.total);
          if (this.activeExitId == "") {
            if (this.wbExitList && this.wbExitList.length > 0) {
              this.activeExitId = this.wbExitList[0].id;
            }
          }
          if (this.wbExitList && this.wbExitList.length > 0) {
            this.queryExitDetail(this.activeExitId);
          }
        }
      );
    },
    submitContractForm() {
      this.$refs["contractEdit"].validate((valid) => {
        if (valid) {
          console.log(this.activeContractId);
          if (this.contractEdit.id && this.contractEdit.id != null) {
            editCompanyUser(this.contractEdit).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.isContractDialog = false;
              this.componentUserList();
            });
          } else {
            addCompanyUser(this.contractEdit).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.isContractDialog = false;
              this.componentUserList();
            });
          }
        }
      });
    },
    contractUpdate(row) {
      this.$nextTick(() => {
        this.contractTitle = "修改业主人员";
        this.isContractDialog = true;
        this.contractEdit = { ...row };
        console.log(this.contractEdit, row, 888);
      });
    },
    contractDelete(row) {
      const ids = row.id;
      this.$modal
        .confirm('是否确认删除姓名为"' + row.userName + '"的数据项？')
        .then(() => {
          deleteCompanyUser(ids).then((res) => {
            if (row.id == this.activeContractId) {
              this.activeContractId = this.wbContractList[0].id;
              this.componentUserList();
              this.$modal.msgSuccess("删除成功");
            }
          });
        })
        .catch(() => {});
    },
    tabClick() {},
    elecSafetyDelete(row) {
      const ids = row.id;
      this.$modal
        .confirm('是否确认删除设备名称为"' + row.deviceName + '"的数据项？')
        .then(() => {
          delWbElecSafety(ids).then((res) => {
            // if (row.id == this.activeElecSafetyId) {
            // this.activeElecSafetyId = this.elecSafetyList[0].id;
            this.elecSafetyList();
            this.$modal.msgSuccess("删除成功");
            // }
          });
        })
        .catch(() => {});
    },

    handleDelete(row) {
      const ids = row.id;
      this.$modal
        .confirm('是否确认删除疏散通道为"' + row.address + '"的数据项？')
        .then(() => {
          delWbExit(ids).then((res) => {
            // if (row.id == this.activeElecSafetyId) {
            // this.activeElecSafetyId = this.elecSafetyList[0].id;
            this.exitList();
            this.$modal.msgSuccess("删除成功");
            // }
          });
        })
        .catch(() => {});
    },
    elecSafetyUpdate(row) {
      this.isElecSafetyDialog = true;
      this.elecSafetyEdit = { ...row };
    },
    elecSafetyAdd() {
      this.resetElecSafetyEdit();
      this.isElecSafetyDialog = true;
    },
    submitElecSafetyForm() {
      this.$refs["elecSafetyEdit"].validate((valid) => {
        if (valid) {
          if (this.elecSafetyEdit.id && this.elecSafetyEdit.id != null) {
            updateWbElecSafety(this.elecSafetyEdit).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.isElecSafetyDialog = false;
              this.elecSafetyList();
            });
          } else {
            addWbElecSafety(this.elecSafetyEdit).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.isElecSafetyDialog = false;
              this.elecSafetyList();
            });
          }
        }
      });
    },
    clickElecSafetyCol(row) {
      this.activeElecSafetyId = row.id;
      this.queryElecSafetyDetail();
    },
    elecSafetyClassName({ row, rowIndex }) {
      if (row.id == this.activeElecSafetyId) {
        return "success-row";
      }
      return "";
    },
    exitClassName({ row, rowIndex }) {
      if (row.id == this.activeExitId) {
        return "success-row";
      }
      return "";
    },
    clickExitCol(row) {
      this.activeExitId = row.id;
      this.queryExitDetail(this.activeExitId);
    },
    queryExitDetail(id) {
      getWbExit(id).then((response) => {
        this.exitItem = response.data;
      });
    },
    exitUpdate(row) {
      // this.resetExitEdit();

      this.isExitDialog = true;
      // 维保记录'
      this.exitEdit = { ...row };
    },
    exitAdd() {
      this.contractTitle = "新增业主人员";
      this.resetExitEdit();
      this.isExitDialog = true;
    },
    resetExitEdit() {
      this.exitEdit = {
        bid: this.baseInfo.id,
        address: null,
        width: null,
        height: null,
        situation: null,
        picture: null,
        remark: null,
      };
    },
    /** 提交按钮 */
    submitExitForm() {
      this.$refs["exitEdit"].validate((valid) => {
        if (valid) {
          if (this.exitEdit.id && this.exitEdit.id != null) {
            updateWbExit(this.exitEdit).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.isExitDialog = false;
              this.exitList();
            });
          } else {
            addWbExit(this.exitEdit).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.isExitDialog = false;
              this.exitList();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss">
.base-info-desc {
  width: 100%;

  .desc-label {
    width: 120px;
    color: #1a1a1a;
  }

  .desc-label-sipl {
    width: 100px;
    color: #1a1a1a;
    flex: 0 0 100px;
  }

  .desc-content-sipl {
    width: 20%;
  }

  .desc-content {
    width: 15%;
  }

  .el-form-item__label {
    font-weight: 400;
  }

  .desc-label-two {
    width: 80px;
    color: #1a1a1a;
    flex: 0 0 80px;
  }

  .desc-content-two {
    width: 30%;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
}
</style>
<style scoped lang="scss">
.dialog-contant {
  display: flex;
  width: 100%;
}

.base-title {
  font-size: 18rpx;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  &::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background: #1777ff;
    border-radius: 3px;
    margin-right: 8px;
  }
}

.base-info {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 10px;

  .base-info-item {
    width: 33%;
    margin-bottom: 8px;
  }
}

.card-contant {
  // display: flex;
  // .card-table {
  //     width: 480px;
  // }
}

.list-model {
  position: relative;

  .el-table {
    margin-bottom: 10px;
  }

  .submit-btn {
    position: absolute;
    right: 0px;
    top: 52px;
  }
}

.bottom-contant {
  display: flex;
  margin-top: 20px;

  .card-right {
    flex: 1;
  }
}

.setp-s {
  width: 400px;
  margin-left: 20px;

  .step-item {
    display: flex;

    .setp-left {
      height: auto;
      width: 15px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
    }

    .circle {
      width: 15px;
      height: 15px;
      background: #1777ff;
      border-radius: 15px;
    }

    .line {
      width: 2px;
      background: #1777ff;
      flex: 1;
    }

    .setp-content {
      font-size: 12px;
      margin-left: 10px;
      padding-bottom: 15px;
    }
  }
}

::v-deep .el-tabs__header {
  margin-bottom: 0;
}
</style>
